$size-as-parent: 100%;
$margin-auto: 0 auto;
$white: #fff;
$black: #000;
$grey: #f5f5f5;
$just-z-index: 1;
$bottom-z-index: -1;
$content-z-index: 24; // 待定
$top-z-index: 9999;

$news-list-padding: 1.6rem 1rem 0;
$comp-footer-height: 50px;
$public-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
$public-box-shadow-bolder: 0 0 4px 2px rgba(0, 0, 0, 0.2);
$public-box-shadow-bottom: 0 2px 4px 0px rgba(0, 0, 0, 0.1);
$public-banner-border-radius: 0 0 12px 12px;
$public-form-padding: 0 1rem;
$public-footer-btn-box-height: 5rem;

#app {
  width: $size-as-parent;
  height: $size-as-parent;
}

.pb-0 {
  padding-bottom: 0!important;
}

.pt-1 {
  padding-top: 1rem!important;
}

.pl-1 {
  padding-left: 1rem!important;
}

.pr-1 {
  padding-right: 1rem!important;
}

.mt-0 {
  margin-top: 0!important;
}

.mt-1 {
  margin-top: 1rem!important;
}

.mb-1 {
  margin-bottom: 1rem!important;
}

.mint-msgbox-input {
  >input {
    text-align: center;
    border: 1px solid #ddd!important;
  }

  >.mint-msgbox-errormsg {
    text-align: right;
  }
}

.public-toast-icon {

  $icon-side: 78px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: $icon-side;
  height: $icon-side;
  margin: $margin-auto;
  background: url("../../assets/images/public/toast.png") no-repeat center / $icon-side auto;

  &.error {
    background-position: center -288px;
  }

  &.success {
    background-position: center 0;
  }
}

.public-long-toast {
  // 防止换行
  white-space: nowrap;
}

.public-topZ-toast {
  z-index: $top-z-index;
}

.public-single-btn {
  display: block;
  width: 92%;
  height: 4.8rem;
  line-height: 4.8rem;
  font-size: 1.8rem;
  color: $white;
  border-radius: 8px;
  background: #0196ff;
}

.public-btn-box {
  display: flex;
  justify-content: space-around;
  padding: 0 .52rem 1rem;

  &.min-box {
    justify-content: flex-end;

    >button {
      margin-left: .8rem;
    }
  }

  >button {
    width: 46.6%;
    height: 4rem;
    line-height: 4rem;
    font-size: 1.8rem;
    text-align: center;
    border-radius: 6px;

    &.min {
      width: 20%;
      height: 2rem;
      line-height: 2rem;
      font-size: 1.4rem;
    }

    &.back {
      color: #333;
      border: 1px solid #ddd;
      background: $white;
    }

    &.submit {
      color: $white;
      background: #0097ff;
    }

    &.warn {
      color: $white;
      background: #f00;
    }

    &[disabled] {
      background: #bbb;
    }
  }
}

.public-footer-btn-box {
  position: fixed;
  bottom: 0;
  display: flex;
  width: $size-as-parent;
  height: $public-footer-btn-box-height;
  z-index: $content-z-index;

  >button {
    height: $size-as-parent;
    line-height: $public-footer-btn-box-height;
    font-size: 1.8rem;
    color: $white;
    text-align: center;

    &.couple-button {
      width: 50%;
    }

    &.single-button {
      width: 100%;
    }

    &:first-of-type {
      background: #fe4500;
    }

    &:last-of-type {
      background: #0097ff;
    }

    &[disabled] {
      background: #bbb;
    }
  }
}

/* pubulic-form */

// 输入框类li

.public-form-li {

  $height: 5rem;

  position: relative;
  display: flex;
  height: $height;
  border-bottom: 1px solid #eee;

  // normal label + input

  >label, input {
    font-size: 1.5rem;
    color: #333;
    height: $size-as-parent;
    line-height: $height;
  }

  >input {
    flex: 1;
    text-align: center;
    overflow: hidden;
    background: $white;

    &.disabled {
      background: #eee;
      color: #999;
    }
  }

  // label + radio + radio

  >label:nth-of-type(1) {

    &.min {
      width: 6.8rem;
    }

    &.short {
      width: 9.2rem;
    }

    &.long {
      width: 11rem;
    }

    >span {
      font-size: 1.2rem;
      color: #f00;
    }
  }

  >label:nth-of-type(2), label:nth-of-type(3), label:nth-of-type(4) {
    flex: 1;
    display: flex;
    align-items: center;

    >input[type="radio"], input[type="checkbox"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 1.8rem;
      height: 1.8rem;
      margin-left: .6rem;
      outline: none;
      border: 1px solid #bbb;
      border-radius: 50%;
      -webkit-tap-highlight-color: transparent;

      &:checked {
        border: none;
        background: url("../../assets/images/public/tick.png") no-repeat center / $size-as-parent;
      }
    }

    >span {
      font-size: 2rem;
      color: #bababa;
    }
  }

  // validation message

  >span {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #e4393c;
    z-index: $just-z-index;
  }

  // button

  &.li-click {
    align-items: center;

    >.location-btn {
      width: 1.2rem;
      height: 2rem;
      background: url("../../assets/images/public/fill-info.png") no-repeat (right 0) / $size-as-parent auto;
    }

    >.type-btn {
      width: 1.3rem;
      height: 1.3rem;
      background: url("../../assets/images/public/fill-info.png") no-repeat (right -1.2rem) / $size-as-parent auto;
    }

    >.date-btn {
      width: 1.8rem;
      height: 1.8rem;
      background: url("../../assets/images/public/fill-info.png") no-repeat (right -17rem) / $size-as-parent auto;
    }

    >.address-btn {
      width: 1.6rem;
      height: 1.6rem;
      background: url("../../assets/images/public/fill-info.png") no-repeat center bottom / $size-as-parent auto;
    }

    >input {
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &.li-four-labels {
    >label:nth-of-type(2), label:nth-of-type(3), label:nth-of-type(4) {
      justify-content: flex-end;
    }
  }

  &.li-textarea {
    height: $height * 2;
    padding: .8rem 0;

    >textarea {
      flex: 1;
      font-size: 1.5rem;
      color: #333;
      border: none;
      outline: none;
    }
  }

  &.li-single-checkbox {

    >label:nth-of-type(2) {
      justify-content: flex-end;
    }
  }

  &.li-others {

    >.others {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 1.5rem;
      color: #999;

      >select {
        border: 1px solid #999;
      }
    }
  }

  &:last-of-type {
    border: none;
  }

  &.message {
    height: auto;
    padding: .6rem 0;
    font-size: 1.2rem;

    &.warn {
      color: #f00;
    }

    &.note {
      color: #999;
    }
  }
}

// 上传图片

.public-form-article  {
  padding: $public-form-padding 1rem;
  margin-top: 1rem;
  background: $white;

  >header {
    font-size: 1.5rem;
    color: #333;
    padding-top: 2rem;
    margin-bottom: 2.6rem;
  }

  >section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: $size-as-parent;

    >.item {
      width: 48%;

      &.licence-front {
        margin: 0 26%;
      }

      >h2 {
        font-size: 1.5rem;
        color: #333;
        text-align: center;
        margin-bottom: 1rem;
      }
    }
  }

  >p {
    font-size: 1.2rem;
    color: #999;
    padding-top: 1rem;
  }
}

.public-input-wrap {
  position: relative;
  width: $size-as-parent;
  height: 0;
  padding-top: 68%;
  background: #ccc;
  overflow: hidden;

  >input {
    display: none;
  }

  >.cross {

    $side: 5.2rem;

    position: absolute;
    width: $side;
    height: $side;
    left: 50%;
    top: 50%;
    margin: (-$side / 2) 0 0 (-$side / 2);
    border-radius: 50%;
    background: #dcdcdc;

    >span {

      $width: .4rem;
      $height: 3.3rem;

      display: inline-block;
      position: absolute;
      width: $width;
      height: $height;
      border-radius: $width / 2;
      background: #bbb;

      &.upright {
        transform: translate(($side - $width) / 2, ($side - $height) / 2) rotate(90deg) ;
      }

      &.across {
        transform: translate(($side - $width) / 2, ($side - $height) / 2);
      }
    }
  }

  >.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  >img {
    position: absolute;
    width: $size-as-parent;
    height: $size-as-parent;
    top: 0;
    left: 0;
    image-orientation: from-image;
  }
}
